<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 你好，高度40px，有版心，字体12px，颜色#a6848d； -->
    <div id="header">
        <div class="w">
            <a href="#">您好，欢迎访问某某安防监控器材服务有限公司官方网站！</a>
            <a href="#"> <span><img data-lazy-src="images/tb_01.png" alt=""></span>&emsp; 设为首页&emsp;☆&emsp;加入收藏</a>
        </div>
    </div>
    <!-- logo栏，高度100px -->
    <div id="logo">
        <div class="w">
            <div class="logo"><img data-lazy-src="images/logo.png" alt="">
                <div class="title">
                    <a href="#">某某安防监控服务有限公司</a>
                    <a href="#">XXX SECURITY MONITORING SERVICE CO., LTD</a>
                </div>
            </div>
            <!-- logo栏搜索框开始 -->
            <div class="search">
                <input type="text" name="" id="" placeholder="请输入关键字">
                <button>搜 索</button>
            </div>
            <!-- logo栏搜索框结束 -->
            <div class="serviceline">
                <img data-lazy-src="images/tel.png" alt="">24小时服务热线</div>
            <div class="tel">400-0000-0000</div>
        </div>
    </div>
    <!-- 导航栏，高50，li宽160 -->
    <div id="nav">
        <div class="w">
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">招商加盟</a></li>
                <li><a href="#">在线留言</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 轮播图，高450px -->
    <div id="banner">
        <img data-lazy-src="images/banner_01.jpg" alt="">
        <div class="capture">
            <h1>捕捉每一个瞬间</h1>
            <div class="bord">
                <p>智能 - 防爆 - 高清 - LED - 防水 - 耐用 - 坚固</p>
                <p>SMART - EXPLOSION-PROOF - HD - LED - WATERPROOF - DURABLE - STRONG</p>
            </div>
            <p>CAPTURE EVERY MOMENT</p>
        </div>
    </div>
    <!-- 关于我们，高160px -->
    <div id="aboutUs">
        <div class="w">
            <p><span>--</span>　关于我们　<span>--</span></p>
            <p>ABOUT US</p>
            <p>公司以“专注安防，用心服务”为核心价值，一切以用户需求为中心</p>
        </div>
    </div>
    <!-- 查看详情 -->
    <div id="introduce">
        <div class="w">
            <div class="fl">
                <img data-lazy-src="images/about_tu.jpg" alt="">
            </div>
            <div class="fr">
                <p>上海监控设备是一家民营高新技术企业，专业从事监控、闭路监控、数字监控、远程监控、网络监控无线监控、监控器材、监控设备、监控系统、防盗报警、门禁考勤、小区楼宇智能化系统、网络综合布线工程等项目，集产品经营、研究开发、工程技术（设计、安装、调试）与售后服务于一体的高新科。</p>
                <br><br>
                <p>上海监控设备是一家民营高新技术企业，专业从事监控、闭路监控、数字监控、远程监控、网络监控无验。公司产品已广泛应用于工商企业、酒店、金融、电力、政府机关、交通系统、劳动就业和社区服务等各个得到了业内人士的一致认可和好评，取得了良好的社会效益。除此之外，我公司还拥有各类网络系 无验。公司产品已广泛应用于工商企业、酒店、金融、电力、政府机关、交通系统、劳动就业和社区服务等各个得到了业内人士的一致认可和好评，取得了良好的社会效益。除此之外，我公司还拥有各类网络统集成方面的丰富经验，可为客户提供各种一体化解决方案......
                    <a href="#">查看详情>></a></p>
            </div>
        </div>
    </div>
    <!-- 我们的服务 -->
    <div id="OurService">
        <div class="w">
            <p><span>--</span>　我们的服务　<span>--</span></p>
            <p>OUR SERVICE</p>
            <p>公司以“专注安防，用心服务”为核心价值，一切以用户需求为中心</p>
        </div>
    </div>
    <!-- 系统介绍，高330px -->
    <div id="system">
        <div class="w">
            <ul>
                <li>
                    <a href="#"><img data-lazy-src="images/tu_01.jpg" alt=""></a>
                    <a href="#">-- 监控系统 --</a>
                </li>
                <li>
                    <a href="#"><img data-lazy-src="images/tu_02.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img data-lazy-src="images/tu_03.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img data-lazy-src="images/tu_04.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img data-lazy-src="images/tu_05.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img data-lazy-src="images/tu_06.jpg" alt=""></a>
                </li>
            </ul>
            <div class="name">
                <a href="#">监控系统</a>
                <a href="#">报警系统</a>
                <a href="#">集团系统</a>
                <a href="#">智能交通</a>
                <a href="#">门禁系统</a>
                <a href="#">消防系统</a>
            </div>
        </div>
    </div>
    <!-- 最新产品 -->
    <div id="newproduct">
        <div class="w">
            <p><span>--</span> 最新产品 <span>--</span></p>
            <p>THE LATEST PRODUCT</p>
            <p>公司以“专注安防，用心服务”为核心价值，一切以用户需求为中心</p>
        </div>
    </div>
    <!-- 机器详情介绍 -->
    <div id="machine">
        <div class="w">
            <div class="box">
                <img data-lazy-src="images/f1_909w.jpg" alt="">
                <h1> 立式标准三辊闸</h1>
                <p>整个产品外形采用不锈钢板冲压成型， 造型美观大方，防锈、耐用......</p>
            </div>
            <div class="box">
                <img data-lazy-src="images/f5_xm1v.jpg" alt="">
                <h1> 导静电夹钳</h1>
                <p>防爆静电接地监测系统</p>
            </div>
            <div class="box">
                <img data-lazy-src="images/f2_xcpx.jpg" alt="">
                <h1> 通八洲路障机</h1>
                <p>液压路障机属于控制道路车辆通行的设备，可以与道闸控制系统等配.......</p>
            </div>
            <div class="box">
                <img data-lazy-src="images/f6_1b6m.jpg" alt="">
                <h1> 长线驱动器</h1>
                <p>DYLINK品牌的DVI双绞线传输器（又叫DVI延长器）,使......</p>
            </div>
            <div class="box">
                <img data-lazy-src="images/f7_9lko.jpg" alt="">
                <h1> 周立功编程器</h1>
                <p>时序升级。根据客户需求，提供各类新芯片的编程支持。</p>
            </div>
        </div>
    </div>
    <!-- 新闻动态 -->
    <div id="news">
        <div class="w">
            <p><span>--</span> 新闻动态 <span>--</span></p>
            <p>NEWS</p>
            <p>公司以“专注安防，用心服务”为核心价值，一切以用户需求为中心</p>
        </div>
    </div>
    <!-- 新闻动态详情 -->
    <div id="news-items">
        <div class="w">
            <div class="fl">
                <div class="box">
                    <div class="box1">
                        <a href="#">29</a>
                        <a href="#">2014-9</a>
                    </div>
                    <div class="box2">
                        <h1>我公司推出专用看车牌白光摄像机</h1>
                        <p>其具体型号和参数见产品分类 XS-81LB系列。</p>
                    </div>
                </div>
                <div class="box">
                    <div class="box1">
                        <a href="#">29</a>
                        <a href="#">2014-9</a>
                    </div>
                    <div class="box2">
                        <h1>上海监控探头重要路段全覆盖</h1>
                        <p>上海警方在路面监控系统建设上投入重金，各级公安机关在辖区重点路段、场所都安装了监控系统，为及时发现和打击路面犯罪提供了有力的技术支撑。</p>
                    </div>
                </div>
                <div class="box">
                    <div class="box1">
                        <a href="#">29</a>
                        <a href="#">2014-9</a>
                    </div>
                    <div class="box2">
                        <h1>轨交世博车站拟装新安保设施 人脸识别器自......</h1>
                        <p>一旦通缉犯经过，人脸识别仪会立即“捕捉”并报警，这种新型安保设施有望安装在世博园区所涉及的轨交车站。据有关方面透露，包括人脸识别、气体检测、......</p>
                    </div>
                </div>
            </div>
            <div class="fr">
                <img data-lazy-src="images/news_01.jpg" alt="">
                <img data-lazy-src="images/news_02.jpg" alt="">
                <img data-lazy-src="images/news_03.jpg" alt="">
                <div class="box4">-- 行业新闻 --</div>
                <div class="box5">-- 公司新闻 --</div>
                <div class="box6">-- 网络轶闻 --</div>
            </div>
        </div>
    </div>
    <!-- 页脚部分 -->
    <div id="footer">
        <div class="w">
            <div class="one">
                <div class="left">
                    <dl>
                        <dt>产品中心</dt>
                        <dd>监控系统</dd>
                        <dd>报警系统</dd>
                        <dd>门禁系统</dd>
                        <dd>集团系统</dd>
                        <dd>消防系统</dd>
                        <dd>智能交通</dd>
                    </dl>
                </div>
                <div class="center">
                    <dl>
                        <dt>新闻动态</dt>
                        <dd>行业新闻</dd>
                        <dd>公司新闻</dd>
                        <dd>网络轶闻</dd>
                    </dl>
                </div>
                <div class="right">
                    <dl>
                        <dt>网站首页</dt>
                        <dd>关于我们</dd>
                        <dd>招商加盟</dd>
                        <dd>在线留言</dd>
                        <dd>联系我们</dd>
                    </dl>
                </div>
            </div>
            <div class="two">
                <h1>某某安防监控设备有限公司（集团总部）</h1>
                <p>地址：上海某某路2号某某广场1楼 1009-1010室 </p>
                <p>电话：<span>021-8888XXXX</span> </p>
                <p>传真：021-8888XXXX </p>
            </div>
            <div class="three">
                <h1>关注我们</h1>
                <img data-lazy-src="images/erweima.jpg" alt="">
                <img data-lazy-src="images/erweima.jpg" alt="">
                <a href="#">&emsp;&nbsp;新浪微博</a>&emsp;&emsp;&emsp;&emsp;&emsp;<a href="#">微信扫一扫</a>
            </div>
        </div>
    </div>
    <script src="js/Jquery.min.js"></script>
    <script src="js/EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            showTime: 1100,
            onLoadBackEnd: function(i, e) {
                console.log("onLoadBackEnd:" + i);
            },
            onLoadBackStart: function(i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>

</body>

</html>